<template>
  <div>
    <!-- 头部 -->
    <div class="top">
      <h4>完善信息</h4>
      <p>请准确填写孩子信息,有助于课程的精准匹配</p>
    </div>
    <!-- 照片 -->
    <div class="photo">
      <div class="man">
        <div class="box1">
          <img src="../../assets/images/男.png" alt="" @click="changenan" />
        </div>
        <div class="box2">
          <img src="../../assets/images/椭圆2.png" alt="" v-show="!flag.flag" />
        </div>
        <div class="box3">
          <img src="../../assets/images/组4.png" alt="" v-show="!flag.flag" />
        </div>
        <span :class="{ active: flag.flag == true }">男孩</span>
      </div>
      <div class="girl">
        <div class="box1">
          <img src="../../assets/images/女.png" alt="" @click="changewuman" />
        </div>
        <div class="box2">
          <img src="../../assets/images/椭圆2.png" alt="" v-show="flag.flag" />
        </div>
        <div class="box3">
          <img src="../../assets/images/组4.png" alt="" v-show="flag.flag" />
        </div>
        <span :class="{ active: flag.flag == false }">女孩</span>
      </div>
    </div>
    <div>
      <div>
        <input
          type="text"
          class="box1"
          placeholder="宝贝英文名"
          v-model="name"
        />
        <button class="btn" @click="getname">智能取名</button>
      </div>
      <input
        type="text"
        placeholder="宝贝生日"
        class="box2"
        @click="showPopup"
        :value="date"
      />
      <van-popup
        v-model:show="show"
        round
        position="bottom"
        :style="{ height: '40%' }"
        >内容</van-popup
      >
      <van-calendar v-model:show="show" @confirm="onConfirm" />
      <button class="btn1" @click="getinfo(), go()">开启学习之旅</button>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { Popup, Calendar } from "vant";

export default {
  components: { vanPopup: Popup, vanCalendar: Calendar },
  setup() {
    const router = useRouter();
    // 智能取名
    const { name, getname } = getnamefun();

    //选择生日
    const { date, onConfirm, showPopup, show } = choose();

    //选择性别
    const { flag, sex, changenan, changewuman } = choosesex();

    //开启学习之旅
    const getinfo = () => {
      if (flag.flag == false) {
        sex.sex = "男";
      } else {
        sex.sex = "女";
      }
      localStorage.setItem("name", name.value);
      localStorage.setItem("sex", sex.sex);
      localStorage.setItem("date", date.value);
      router.go(-1);
    };
    // go
    const go = () => {
      const router = useRouter();
      router.go(-1);
    };

    return {
      flag,
      name,
      changewuman,
      changenan,
      getinfo,
      show,
      showPopup,
      onConfirm,
      date,
      getname,
      go,
    };
  },
};
// 选择性别
const choosesex = () => {
  let sex = reactive({
    sex: "男",
  });
  if (localStorage.getItem("sex")) {
    sex.sex = localStorage.getItem("sex");
  }
  let flag = reactive({
    flag: false,
  });

  const changenan = () => {
    flag.flag = !flag.flag;
  };
  const changewuman = () => {
    flag.flag = !flag.flag;
  };
  return { flag, sex, changenan, changewuman };
};
// 智能取名
const getnamefun = () => {
  let name = ref("");
  if (localStorage.getItem("name")) {
    name.value = localStorage.getItem("name");
  }
  const getname = () => {
    let result = [];
    let n;
    n = Math.round(Math.random() * 3) + 3;
    for (let i = 0; i < n; i++) {
      let ranNum = Math.ceil(Math.random() * 25);
      result.push(String.fromCharCode(65 + ranNum));
    }
    name.value = result.join("");
  };
  return { name, getname };
};

// 选择生日
const choose = () => {
  let date = ref("");
  if (localStorage.getItem("date")) {
    date.value = localStorage.getItem("date");
  }

  const formatDate = (date) => `${date.getMonth() + 1}月${date.getDate()}日`;
  const onConfirm = (value) => {
    show.value = false;
    date.value = formatDate(value);
  };
  const show = ref(false);
  const showPopup = () => {
    show.value = true;
  };
  return { date, onConfirm, showPopup, show };
};
</script>

<style lang="less" scoped>
.top {
  text-align: center;
  h4 {
    font-size: 18px;
    margin-top: 50px;
  }
  p {
    font-size: 12px;
    margin-top: 14px;
    color: #666666;
  }
}
.photo {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600px;
  .active {
    color: black !important;
  }
  .man {
    position: relative;

    .box1 img {
      position: absolute;
      top: 25px;
      left: 60px;
      width: 77px;
      height: 75px;
      z-index: 11;
    }
    .box2 img {
      position: absolute;
      top: 20px;
      left: 56px;
      width: 85px;
      height: 85px;
    }
    .box3 img {
      position: absolute;
      top: 77px;
      left: 111px;
      width: 27px;
      height: 27px;
    }
    span {
      display: block;
      margin-left: 80px;
      margin-top: 120px;
      color: #3b98ff;
    }
  }
  .girl {
    position: relative;
    .box1 img {
      position: absolute;
      top: 25px;
      right: 60px;
      width: 77px;
      height: 75px;
      z-index: 11;
    }
    .box2 img {
      position: absolute;
      top: 20px;
      right: 56px;
      width: 85px;
      height: 85px;
    }
    .box3 img {
      position: absolute;
      top: 77px;
      right: 57px;
      width: 27px;
      height: 27px;
      z-index: 11;
    }
    span {
      display: block;
      margin-right: 80px;
      margin-top: 120px;
      color: #3b98ff;
    }
  }
}
div {
  position: relative;
  font-size: 16px;
  input:nth-child(1) {
    width: 300px;
    height: 45px;
    background: #dfdfdf;
    border: none;
    border-radius: 24px;
    margin: 38px 40px 1px;
    text-indent: 23px;
  }
  .btn {
    width: 85px;
    height: 30px;
    border: none;
    border-radius: 20px;
    background: #fff;
    color: #3b98ff;
    position: absolute;
    top: 45px;
    right: 45px;
  }
}

input:nth-child(2) {
  width: 300px;
  height: 45px;
  background: #dfdfdf;
  border: none;
  border-radius: 24px;
  margin-top: 30px;
  margin-left: 40px;
  text-indent: 23px;
}
.btn1 {
  width: 300px;
  height: 45px;
  border-radius: 24px;
  border: none;
  background: #3b98ff;
  margin: 30px 38px;
  color: #fff;
  font-size: 16px;
}
</style>
